<template>
	<!-- 添加职位 -->
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<view class="index">
			<moxi-nav :set="navSet"></moxi-nav>
			<view class="title" v-if="info.id == ''">添加职位信息</view>
			<view class="title" v-else>编辑职位信息</view>
			<view class="addMsg">
				<u--form labelPosition="left" :model="info" ref="uForm">
					<u-form-item class="jobTitle" label="职位名称" borderBottom ref="item1">
						<u--input v-model="info.title" clearable border="none"></u--input>
					</u-form-item>
					<u-form-item label="职位类型" borderBottom @click="showType = true;" ref="item1">
						<u--input v-model="type[info.type]" disabled placeholder="请选择职位类型" style="padding: 5px;" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="学历要求" borderBottom @click="showEdu = true;" ref="item1">
						<u--input v-model="edu[info.edu]" disabled placeholder="请选择学历要求" style="padding: 5px;" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="经验要求" borderBottom @click="showExp = true;" ref="item1">
						<u--input v-model="exp[info.exp]" disabled placeholder="请选择经验要求" style="padding: 5px;" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item class="jobTab" label="标签选择" borderBottom ref="item1">
						<u-checkbox-group v-model="info.tag" placement="row" @change="checkboxChange">
							<u-checkbox :activeColor="app_color" :customStyle="{marginBottom: '8px'}" v-for="(item, index) in tagData"
								:key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item class="zhaopin" label="招聘人数" borderBottom ref="item1">
						<u-number-box v-model="info.num" @change="numChange"></u-number-box>
					</u-form-item>
					<u-form-item class="xinzi" label="薪资范围" borderBottom ref="item1">
						<u--input v-model="info.min_money" type="number" placeholder="请输入最低薪资"
							placeholderStyle="text-align: center;" border="none"></u--input>至
						<u--input v-model="info.max_money" type="number" placeholder="请输入最高薪资"
							placeholderStyle="text-align: center;" border="none"></u--input>
					</u-form-item>
					<u-form-item class="jobContacts" label="联系人姓名" borderBottom ref="item1">
						<u--input v-model="info.name" clearable border="none"></u--input>
					</u-form-item>
					<u-form-item class="jobContactsTel" label="联系人电话" borderBottom ref="item1">
						<u--input v-model="info.tel" type="number" clearable border="none"></u--input>
					</u-form-item>
					<u-form-item class="jobContactsTel" label="所在城市" borderBottom ref="item1">
						<moxi-city v-model="info" @change="change"></moxi-city>
					</u-form-item>
					<u-form-item class="jobContactsTel" label="详细地址" borderBottom ref="item1">
						<u--textarea v-model="info.address" placeholder="请输入详细地址" :maxlength="-1"></u--textarea>
					</u-form-item>
					<u-form-item class="content" label="职位介绍23" borderBottom ref="item1">
						<u--textarea v-model="info.content" placeholder="请输入内容" :maxlength="-1"></u--textarea>
					</u-form-item>
				</u--form> 
				<view v-show="showType">
					<u-action-sheet :show="showType" :actions="typeData" title="选择岗位分类" @close="showType = false" 
						@select="typeSelect">
					</u-action-sheet>
				</view>
				<view v-show="showEdu">
					<u-action-sheet :show="showEdu" :actions="eduData" title="请选择学历要求" @close="showEdu = false" 
						@select="eduSelect">
					</u-action-sheet>
				</view>
				<view  v-show="showExp">
					<u-action-sheet :show="showExp" :actions="expData" title="请选择经验要求" @close="showExp = false"
						@select="expSelect">
					</u-action-sheet>
				</view>
			</view>

			<view class="btns" style="border: 1px solid #5ac725;">
				<view class="confirm" @click="tj"
					:style="{background:app_color}">提交</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					id: '',
					type: '',
					title: '',
					content: '',
					num: 1,
					min_money: 3000,
					max_money: 5000,
					tag: [],
					exp: '',
					province:"",
					city:"",
					area:"",
					edu: '',
					tel: '',
					name: '',
					address:""
				},
				tagData: [],
				expData: [],
				eduData: [],
				typeData: [],
				showExp: false,
				showEdu: false,
				showType: false,
				radio: '',
				switchVal: false,
				isNormal: true,
				exp:{},
				edu:{},
				type:{}
			}
		},
		onLoad(param) {
			this.get()
			if(param.id){
				this.moxiPost("/plugin/zx/user/zhaoping/get",{id:param.id},(data)=>{
					for(let k in this.info){
						this.info[k] = data.data[k];
					}
					this.$forceUpdate();
				})
			}
		},
		methods: {
		change(e){
			this.info = e;
		},
			check() {
				if (this.info.min_money > this.info.max_money) {
					this.msg('最低薪资不能高于最高薪资')
					this.isNormal = false
				}

				const pattern =
					/^((13[0-9])|(14[5,7,9])|(15([0-3]|[5-9]))|(166)|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[8|9]))\d{8}$/;
				let ze = pattern.test(this.info.tel);
				if (ze == false) {
					this.isNormal = false
					this.msg('请输入正确的电话机号码')
				}
			},
			parse(min, max) {
				let numMin = parseFloat(min)
				if (min.toString().indexOf(".") != -1) {
					this.info.min_money = Number(numMin.toFixed(2))
				} else {
					this.info.min_money = numMin
				}

				let numMax = parseFloat(max)
				if (max.toString().indexOf(".") != -1) {
					this.info.max_money = Number(numMax.toFixed(2))
				} else {
					this.info.max_money = numMax
				}
			},
			tj() {
				this.parse(this.info.min_money, this.info.max_money)
				this.isNormal = true
				this.check()
				if (this.isNormal == false) {
					return
				}
				if(Number(this.info.min_money)>=Number(this.info.max_money)){
					this.msg('最高薪资必须大于最低薪资');
					return;
				}
				if(Number(this.info.min_money)<500){
					this.msg('最低薪资不得低于500');
					return;
				}
				let self = this
				this.moxiPost('/plugin/zx/user/zhaoping/mp_add', this.info, function(data) {
					self.msg('发布成功')
					setTimeout(()=>{
						uni.redirectTo({
							url: '/pages/plugin/zx/myjob'
						});
					},500)
				})
			},
			
			typeSelect(e) {
				console.log(1232);
				this.info.type = e.key
				this.showType = false;
				console.log(this.showType);
			},
			numChange(e) {
				// console.log('e ==>', e);
			},
			checkboxChange(n) {
				this.tag = n
			},
			eduSelect(e) {
				this.info.edu = e.key
				// this.info.edu = e.value
			},
			expSelect(e) {
				this.info.exp = e.key
				// this.info.exp = e.value
			},
			get() {
				let self = this
				this.moxiPost('/plugin/zx/user/zhaoping/get_config', {}, function(data) {
					if (data.data.edu && self.eduData.length == 0) {
						self.edu = data.data.edu;
						for (let key in data.data.edu) {
							self.eduData.push({
								value: key,
								name: data.data.edu[key],
								key:key
							})
						}
					}
					// console.log('self.eduData ==>', self.eduData);
					if (data.data.exp && self.expData.length == 0) {
						self.exp = data.data.exp;
						for (let key in data.data.exp) {
							self.expData.push({
								value: key,
								name: data.data.exp[key],
								key:key
							})
						}
					}
					// console.log('self.expData ==>', self.expData);
					if (data.data.tag && self.tagData.length == 0) {
						for (let key in data.data.tag) {
							self.tagData.push({
								value: data.data.tag[key],
								name: data.data.tag[key],
								key:key
							})
						}
					}
					
					if (data.data.type && self.typeData.length == 0) {
						self.type = data.data.type;
						for (let key in data.data.type) {
							self.typeData.push({
								value: data.data.type[key],
								name: data.data.type[key],
								key:key
							})
						}
					}
					// console.log('self.typeData ==>', self.typeData);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		width: 94%;
		height: 40px;
		display: flex;
		margin: 20px auto;
		border: 1px solid #ccc;
		border-radius: 50px;
		overflow: hidden;
		text-align: center;
		line-height: 40px;

		.reset,
		.confirm {
			
			// width: 50%;
		}
		.reset{border-right: .5px solid #5ac725;background-color: #fff;color: #5ac725;}
		.confirm{
			border-left: .5px solid #5ac725;background: #5ac725;color: #fff;width: 100%;
		}

		.reset {
			border-right: .5px solid #ccc;
		}

		.confirm {
			border-left: .5px solid #ccc;
		}
	}

	// .jobTab /deep/ .u-checkbox-label--left span {
	// 	white-space: nowrap !important;
	// 	overflow: hidden !important;
	// 	text-overflow: ellipsis !important;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(5) .u-checkbox-label--left span {
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	// .xinzi /deep/ .uni-input-input {
	// 	text-align: center;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(7) .uni-input-input {
		text-align: center;
	}

	// .zhaopin /deep/ .u-form-item__body__right__content__slot {
	// 	justify-content: flex-end;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(6) .u-form-item__body .u-form-item__body__right__content__slot {
		justify-content: flex-end;
	}

	// .jobTitle /deep/ .u-form-item__body__right,
	// .jobContacts /deep/ .u-form-item__body__right,
	// .jobContactsTel /deep/ .u-form-item__body__right {
	// 	margin-top: 6px;
	// 	padding-left: 10px;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(1) .u-form-item__body__right,
::v-deep .u-form .u-form-item:nth-of-type(8) .u-form-item__body__right,
	::v-deep .u-form .u-form-item:nth-of-type(9) .u-form-item__body__right {
		margin-top: 6px;
		padding-left: 10px;
	}

	// .jobTitle /deep/ .u-form-item__body,
	// .jobTab /deep/ .u-form-item__body,
	// .jobContacts /deep/ .u-form-item__body,
	// .jobContactsTel /deep/ .u-form-item__body,
	// .xinzi /deep/ .u-form-item__body,
	// .content /deep/ .u-form-item__body {
	// 	flex-direction: column !important;
	// 	padding: 0 !important;
	// }
	
	// .jobTitle /deep/ 		==> /deep/ .u-form .u-form-item:nth-of-type(1)
	// .jobTab /deep/ 			==>	/deep/ .u-form .u-form-item:nth-of-type(5)
	// .zhaopin /deep/			==> /deep/ .u-form .u-form-item:nth-of-type(6)
	// .xinzi /deep/ 			==> /deep/ .u-form .u-form-item:nth-of-type(7)
	// .jobContacts /deep/ 		==> /deep/ .u-form .u-form-item:nth-of-type(8)
	// .jobContactsTel /deep/ 	==> /deep/ .u-form .u-form-item:nth-of-type(9)
	// .content /deep/ 			==> /deep/ .u-form .u-form-item:nth-of-type(10)
	
	::v-deep .u-form .u-form-item:nth-of-type(1) .u-form-item__body,
	::v-deep .u-form .u-form-item:nth-of-type(5) .u-form-item__body,
	::v-deep .u-form .u-form-item:nth-of-type(7) .u-form-item__body,
	::v-deep .u-form .u-form-item:nth-of-type(8) .u-form-item__body,
	::v-deep .u-form .u-form-item:nth-of-type(9) .u-form-item__body,
	::v-deep .u-form .u-form-item:nth-of-type(10) .u-form-item__body {
		flex-direction: column !important;
		padding: 0 !important;
	}

	// .jobTab /deep/ .u-form-item__body__left,
	// .xinzi /deep/ .u-form-item__body__left,
	// .content /deep/ .u-form-item__body__left {
	// 	margin-bottom: 6px !important;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(5) .u-form-item__body__left,
	::v-deep .u-form .u-form-item:nth-of-type(7) .u-form-item__body__left,
	::v-deep .u-form .u-form-item:nth-of-type(10) .u-form-item__body__left {
		margin-bottom: 6px !important;
	}

	// .jobTab /deep/ .u-checkbox-label--left {
	// 	width: 100px;
	// 	margin-right: 10px;
	// }

	::v-deep .u-form .u-form-item:nth-of-type(5) .u-checkbox-label--left {
		width: 100px;
		margin-right: 10px;
	}

	// .jobTab /deep/ .u-checkbox-group--row {
	// 	justify-content: space-between;
	// 	flex-shrink: inherit !important;
	// 	flex-wrap: wrap;
	// }
	
	::v-deep .u-form .u-form-item:nth-of-type(5) .u-checkbox-group--row uni-text {
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	
	// #ifdef MP-WEIXIN
	::v-deep .u-form .u-form-item:nth-of-type(6) .u-form-item__body .u-number-box {
		justify-content: flex-end;
	}
	
	::v-deep .u-form .u-form-item:nth-of-type(7) .u-form-item__body__right__content__slot {
		flex-direction: row !important;
	}
	::v-deep .u-form .u-form-item:nth-of-type(7) .u-input__content__field-wrapper__field {
		text-align: center !important;
	}
	
::v-deep .u-form .u-form-item:nth-of-type(5) .u-checkbox-group--row text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	// #endif
	
	::v-deep .u-form .u-form-item:nth-of-type(5) .u-checkbox-group--row {
		justify-content: space-between;
		flex-shrink: inherit !important;
		flex-wrap: wrap;
	}

	::v-deep .u-form-item {
		margin-bottom: 6px;
	}

	::v-deep .u-form-item:nth-last-of-type(1) {
		margin-bottom: 0;
	}

	::v-deep .u-form-item__body__left {
		width: auto !important;
	}

	.addMsg {
		margin: 10px;
		padding: 10px;
		border-radius: 6px;
		// background-color: rgba(255, 255, 255, 1);
	}

	.title {
		margin: 10px auto;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}

	.index {
		width: 100%;
		height: 100vh;
		// background-color: #f2f2f2;
		overflow: auto;
	}

	// #ifdef MP-WEIXIN

	// #endif
</style>